<template>
  <div class="LogoContainer">
    <div class="LogoTitle">
      <p>{{ i18nt.logoView.title }}</p>
    </div>
    <div class="LogoSubTitle">
      <p>{{ i18nt.logoView.str }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
</script>

<style scoped lang="scss">
.LogoContainer {
  @include relative_hw;
  flex-direction: column;
  background-image: url("@/assets/png/161.png");
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: flex-end;

  &::before {
    content: "";
    @include absolute_hw(4px, 100%);
    background: #035db9;
    // background: red;
    z-index: 999;
    top: 0;
    left: 0;
  }

  .LogoTitle {
    @include rel_cen_hw(120px, 1200px);
    margin-bottom: 35px;
    p {
      // 字体不生效，todo
      font-family: "DingTalk JinBuTi", Helvetica, Arial, sans-serif;
      font-size: 100px;
      letter-spacing: 0;
      color: #ffffff;
    }
  }

  .LogoSubTitle {
    @include rel_cen_hw(48px, 578px);
    margin-bottom: 169px;
    p {
      // 字体不生效，todo
      font-family: "DingTalk JinBuTi", Helvetica, Arial, sans-serif;
      font-size: 40px;
      letter-spacing: 0;
      color: #ffffff;
    }
  }
}
</style>
